<template>
  <div>
    <el-dropdown trigger="click" @command="operaTion">
      <el-avatar size="default">
        <img :src="this.dataList.avatarUrl" />
      </el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :icon="User" :command="1">个人信息</el-dropdown-item>
          <el-dropdown-item :icon="Unlock" :command="2">密码修改</el-dropdown-item>
          <el-dropdown-item :icon="Right" :command="3">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import { UserFilled, User, Unlock, Right } from "@element-plus/icons-vue";
import { mapActions } from "vuex";
import { post } from "@/utlis/http";
export default {
  components: {
    UserFilled,
    User,
    Unlock,
    Right,
  },
  data() {
    return {
      dataList: [], //头像
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    ...mapActions(["userInfo", "loginOut"]),
    operaTion(e) {
      switch (e) {
        case 1:
          this.$router.push({ name: "info" });
          break;
        case 2:
          this.$router.push({ name: "password" });
          break;
        case 3:
          this.loginOut(); //调用退出登录的方法
          ElMessage.success("退出成功");
          break;
        default:
          break;
      }
    },
    getUser() {
      post({
        _gp: "admin",
        _mt: "info",
      })
        .then((res) => {
          let { data, errmsg } = res.data; //解构赋值
          if (errmsg == "成功") {
            this.dataList = data;
            this.userInfo(data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  setup() {
    return {
      UserFilled,
      User,
      Unlock,
      Right,
    };
  },
};
</script>
